@import "./common";

body {
    header {

        // 轮播图
        .banner {
            width: 100%;
            height: getvw(287);
            overflow: hidden;
            position: relative;

            // 轮播图图片
            .bannerImage {
                width: 100%;
                height: 100%;
                display: flex;
                animation: bannerImage 5s linear 0.5s infinite;

                img {
                    flex-shrink: 0;
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            // 轮播图滚动条
            .bannerBottom {
                width: 100%;
                height: getvw(12);
                background-color: #000;
                opacity: 0.5;
                position: absolute;
                bottom: 0;

                span {
                    width: getvw(150);
                    height: 100%;
                    display: block;
                    background-color: #fff;
                    animation: bannerBottom 5s linear 0.5s infinite;
                }
            }

            @keyframes bannerImage {

                0%,
                5% {
                    transform: translateX(0);
                }

                20%,
                25% {
                    transform: translateX(-100%);
                }

                45%,
                50% {
                    transform: translateX(-200%);
                }

                70%,
                75% {
                    transform: translateX(-300%);
                }

                95%,
                100% {
                    transform: translateX(-400%);
                }
            }

            @keyframes bannerBottom {

                0%,
                5% {
                    transform: translateX(0);
                }

                20%,
                25% {
                    transform: translateX(100%);
                }

                45%,
                50% {
                    transform: translateX(200%);
                }

                70%,
                75% {
                    transform: translateX(300%);
                }

                95%,
                100% {
                    transform: translateX(400%);
                }
            }
        }
    }

    main {
        .pgp {
            .titleBox {
                margin: getvw(40) 0 getvw(20);
                position: relative;

                >i {
                    padding-left: getvw(10);
                    font-size: getvw(60);
                    color: #ff9344;
                }

                span {
                    font-size: getvw(30);
                    line-height: getvw(69);
                    position: absolute;

                    &:first-of-type {
                        font-weight: 600;
                        left: getvw(80);
                    }

                    &:last-of-type {
                        font-size: getvw(24);
                        right: 0;

                        .icon-xiangyou3 {
                            font-size: getvw(26);
                            color: #ff9344;
                            margin-left: getvw(8);
                        }
                    }
                }
            }

            .imgBox {
                height: getvw(215);
                display: flex;
                flex-flow: wrap;
                justify-content: space-around;
                align-content: space-between;

                img {
                    width: getvw(241);
                    display: block;
                }
            }
        }

        .gyl {
            .titleBox {
                margin: getvw(40) 0 getvw(20);
                position: relative;

                >i {
                    padding-left: getvw(10);
                    font-size: getvw(60);
                    color: #ff9344;
                }

                span {
                    font-size: getvw(30);
                    line-height: getvw(69);
                    position: absolute;

                    &:first-of-type {
                        font-weight: 600;
                        left: getvw(80);
                    }

                    &:last-of-type {
                        font-size: getvw(24);
                        right: 0;

                        .icon-xiangyou3 {
                            font-size: getvw(26);
                            color: #ff9344;
                            margin-left: getvw(8);
                        }
                    }
                }
            }

            .cont {
                .circle {
                    display: block;
                    height: getvw(164);
                    margin: getvw(30) 0;
                    display: flex;

                    .imgBox {
                        img {
                            display: block;
                            height: 100%;
                        }
                    }

                    .infoBox {
                        flex: 1;
                        margin-left: getvw(20);

                        p {
                            font-size: getvw(30);
                            line-height: getvw(56);

                            &:first-child {
                                font-weight: 600;
                            }

                            &:nth-child(2) {
                                font-size: getvw(22);
                            }

                            &:last-child {
                                font-size: getvw(32);
                                color: #ff9344;
                            }

                            span {
                                font-size: getvw(22);
                                color: #858585;
                                float: right;
                                font-weight: normal;
                            }
                        }
                    }
                }
            }
        }
    }
}